<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 900px;
      display: grid;
      /* grid-template-rows: 20px; */
      grid-template-columns: 300px auto 300px;
    }

    .item {
      cursor: pointer;
      text-decoration: underline;
    }

  </style>

</head>

<body>
  <h3>popular destination</h3>
  <div class="box">

  </div>

</body>

<script>

  /**
   * 前端上机测试题
      问答题：
      1.注意：本题应该为IE7+、Chrome、Firefox提供跨浏览器实现，实现下面显示的功能：
  
        需求:
        名单上的城市数量随时可能变化。
        城市列表应始终显示在三栏布局中，也适⽤于只有四个城市的情况。
        该列表应按字⺟顺序排序（如上⾯的例⼦所示）
        点击每一个城市名称应该显示关于城市（一些HTML）的列表下面的附加信息。
        你只能使⽤一个JS库，它只能用来解决跨浏览器的问题。
  
        请在JavaScript中使⽤用以下城市列表和描述来测试和实现您的解决⽅方案.
  
   * **/
  let arr = [
    {
      name: "Moscow",
      count: 12,
      content: "<p>Moscow is the capital city and the most populous federal subject of<b>Russia </b>.The city is a major political, economic, cultural and scientific center in Russia and in Eurasia. </p > "
    },
    {
      name: "Amsterdam",
      count: 25,
      content: "<p>Amsterdam is the capital and most populous city of the< b > Netherlands </b>.Its status as the Dutch capital is mandated by the Constitution of the Netherlands though it is not the seat of the Dutch government, which is at the Hague. </p > "
    },
    {
      name: "Lisbon",
      count: 15,
      content: "<p>Lisbon is the largest city and capital of <b>Portugal </ b> with a population of 547,631 within its administrative limits on a land area of 84.8 square kilometers. </p>"
    },
    {
      name: "Berlin",
      count: 19,
      content: "<p>Berlin is the capital city of <b>Germany </b> and one of the 16 states of Germany. With a population of 3.3 million people, Berlin is Germany's largest city and is the second most populous city proper andthe seventh most populous urban area in the European Union. </p> "
    },
    {
      name: "Madrid",
      count: 25,
      content: "<p>Madrid is the capital of <b>Spain </b> and its largest city. The population of the city is roughly 3.3 million and the entire population of the Madrid metropolitan area is calculated to be around 6.5million. </p> "
    },
    {
      name: "Barcelona",
      count: 10,
      content: "<p>Barcelona is a Spanish city, capital of the autonomous community of Catalonia and the second largest city in the country, with apopulation of 1, 620, 943 within its administrative limits. </p> "
    },
    {
      name: "Zagreb",
      count: 27,
      content: "<p>Zagreb is the capital and the largest city of theRepublic of<b>Croatia </b>.It is located in the northwest of the country, along the Sava river, at the southern slopes of the Medvednica mountain. </p > "
    },
    {
      name: "Singapore",
      count: 30,
      content: "<p>Singapore, officially the Republic of Singapore, is aSoutheast Asian sovereign city- state off the southern tip of the Malay Peninsula, 137 kilometers north of the equator. </p > "
    },
    {
      name: "Beijing",
      count: 14,
      content: "<p>Beijing, sometimes romanized as Peking, is the capital of the People's Republic of China and one of the most populous cities inthe world.The population as of 2012 was 20, 693, 000. </p> "
    },
    {
      name: "Paris",
      count: 5,
      content: "<p>Paris is the capital and most populous city of        < b > France </b>.It is situated on the River Seine, in the north of the country, at the heart of the Île - de - France region. </p > "
    }
  ]


  arr = arr.sort((a, b) => {
    return a.name[0].charCodeAt() - b.name[0].charCodeAt()
  })

  let box = document.querySelector(".box")

  arr.forEach(item => {
    let div = document.createElement("div")
    div.innerText = item.name
    div.className = "item"
    box.appendChild(div)
  })

  let item = document.querySelectorAll(".item")
  item.forEach((item, index) => {
    item.onclick = function () {
      let content = arr[index].content
      let div = document.createElement("div")

      div.innerHTML = content
      div.style.textDecoration = "none"
      this.appendChild(div)


    }
  })



</script>


</html>